<!--
 * @Description: 
 * @Author: wlj
 * @Date: 2022-12-26 16:03:06
 * @LastEditors: wlj
 * @LastEditTime: 2023-01-05 16:47:14
 * @FilePath: \my-vite-app\src\views\Home.vue
-->
<template>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ store.user.getAddAge(100) }}</p>
  <p>性别：{{ sex }}</p>
  <p>是否成年：{{ ageMsg }}</p>
  <button @click="changeName">axios</button>
  <a-button type="primary" @click="reset">重置 </a-button>
  <!-- <child></child> -->
  <button @click="patchStore">批量修改数据</button>
  <button @click="saveName">调用aciton</button>
  <a-button type="default"
    ><router-link to="/child">跳转 <svg-icon iconName="icon-youjiantou"></svg-icon></router-link>
  </a-button>

  <div>
    <h3>hook:</h3>
    <p>页面宽度: {{ screen.width }}</p>
    <p>页面高度: {{ screen.height }}</p>
    <a-button @click="getWH">获取页面的宽高</a-button>
  </div>
</template>

<script setup lang="ts">
import Store from '@/store/index'
import child from './child.vue'
import { getCaptcha } from '@/api/user'
import screenWH from '@/hooks/useScreenWh'
const store = Store()
console.log(store)
// const name = ref<string>(store.name);
// const age = ref<number>(store.age);
// const sex = ref<string>(store.sex);
const { name, age, sex, ageMsg } = storeToRefs(store.user)
let { screen, getWH } = screenWH()

const changeName = async () => {
  store.user.name = '张三'
  const res = await getCaptcha({
    captchaType: 'clickWord'
  })
}

// 重置store
const reset = () => {
  store.user.$reset()
}

// 批量修改
const patchStore = () => {
  store.user.$patch({
    name: '张三',
    age: 50,
    sex: '男'
  })
  console.log(store)

  // store.$state = { counter: 666, name: "张三" };

  // store.$patch((state: any) => {
  //   state.items.push({ name: "shoes", quantity: 1 });
  //   state.hasChanged = true;
  // });
}

const saveName = () => {
  store.user.saveName('李四')
}
</script>
